<template>
    <div :style="{height: visible ? 'auto': '0px'}" class="mask">


        <Transition name="scale">
            <div v-if="visible" @click="close" class="parent">

                <div @click.stop class="content" :style="{ width: width }">
                    <div class="title-p">{{ title }}</div>
                    <div class="body">
                        <slot></slot>
                    </div>
                </div>

            </div>
        </Transition>
    </div>
</template>
<script setup lang="ts">
const props = withDefaults(defineProps<{
    visible: boolean,
    title: string,
    width?: string
}>(), {
    width: '80vw'
})
const emit = defineEmits<{
    close: []
}>()
const close = () => {
    emit('close')
}
</script>
<style scoped>
.mask {
    position: fixed;
    z-index: 200;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #00000099;
}

.parent {
    position: fixed;
    z-index: 200;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 201;
    height: 80vh;

    background: linear-gradient(to bottom, rgb(5, 79, 99), rgba(5, 79, 99, 0.1), rgb(5, 79, 99));
    border-radius: 1vh;
    border: 0.125vh solid rgb(6, 112, 180);
}

.title-p {
    width: 27vw;
    height: 10vh;
    background-image: url("@/assets/title.png");
    background-repeat: no-repeat;
    background-size: contain;
    color: #fff;
    text-align: center;
    padding: 1vh;
    box-sizing: border-box;
    font-size: 1vw;
}

.body {
    height: calc(100% - 10vh);
    padding: 0vw 2vh 2vw 2vh;
    box-sizing: border-box;
}

.scale-enter-active,
.scale-leave-active {
    transition: 0.5s;

}

.scale-enter-from,
.scale-leave-to {
    transform: scale(0);
}
</style>